<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Class: CanvasRenderer</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
    <link type="text/css" rel="stylesheet" href="styles/custom.css">
    <!--[if lt IE 9]>
    <script src="scripts/html5shiv.min.js"></script>
    <script src="scripts/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div style="position:fixed;top:0px;left:0px;"><h1 class="page-title">Class: CanvasRenderer</h1></div>
<div id="main" style="margin-top:77px;">






<nav class="classnav scroll-styled">

    <h5><a href="#main" style="color:#000">class : renderer.CanvasRenderer</a></h5>

















































        <h5>Methods</h5>
        <ul>


                <li><a href="#render">

                render</a></li>


                <li><a href="#checkResources">

                checkResources</a></li>


                <li><a href="#draw">

                draw</a></li>


                <li><a href="#drawOnInteracting">

                drawOnInteracting</a></li>


                <li><a href="#needToRedraw">

                needToRedraw</a></li>


                <li><a href="#onSkipDrawOnInteracting">

                onSkipDrawOnInteracting</a></li>


                <li><a href="#mustRenderOnInteracting">

                mustRenderOnInteracting</a></li>


                <li><a href="#setToRedraw">

                setToRedraw</a></li>


                <li><a href="#setCanvasUpdated">

                setCanvasUpdated</a></li>


                <li><a href="#isCanvasUpdated">

                isCanvasUpdated</a></li>


                <li><a href="#remove">

                remove</a></li>


                <li><a href="#getMap">

                getMap</a></li>


                <li><a href="#getCanvasImage">

                getCanvasImage</a></li>


                <li><a href="#clear">

                clear</a></li>


                <li><a href="#isBlank">

                isBlank</a></li>


                <li><a href="#show">

                show</a></li>


                <li><a href="#hide">

                hide</a></li>


                <li><a href="#setZIndex">

                setZIndex</a></li>


                <li><a href="#hitDetect">

                hitDetect</a></li>


                <li><a href="#loadResources">

                loadResources</a></li>


                <li><a href="#createCanvas">

                createCanvas</a></li>


                <li><a href="#resizeCanvas">

                resizeCanvas</a></li>


                <li><a href="#clearCanvas">

                clearCanvas</a></li>


                <li><a href="#prepareCanvas">

                prepareCanvas</a></li>


                <li><a href="#getViewExtent">

                getViewExtent</a></li>


                <li><a href="#completeRender">

                completeRender</a></li>


                <li><a href="#getEvents">

                getEvents</a></li>


                <li><a href="#onZoomStart">

                onZoomStart</a></li>


                <li><a href="#onZoomEnd">

                onZoomEnd</a></li>


                <li><a href="#onZooming">

                onZooming</a></li>


                <li><a href="#onMoveStart">

                onMoveStart</a></li>


                <li><a href="#onMoving">

                onMoving</a></li>


                <li><a href="#onMoveEnd">

                onMoveEnd</a></li>


                <li><a href="#onResize">

                onResize</a></li>


                <li><a href="#onDragRotateStart">

                onDragRotateStart</a></li>


                <li><a href="#onDragRotating">

                onDragRotating</a></li>


                <li><a href="#onDragRotateEnd">

                onDragRotateEnd</a></li>


                <li><a href="#onSpatialReferenceChange">

                onSpatialReferenceChange</a></li>


                <li><a href="#getDrawTime">

                getDrawTime</a></li>


                <li><a class="inherit" href="#callInitHooks">

                callInitHooks</a></li>


                <li><a class="inherit" href="#setOptions">

                setOptions</a></li>


                <li><a class="inherit" href="#config">

                config</a></li>


                <li><a class="inherit" href="#onConfig">

                onConfig</a></li>

        </ul>



</nav>


<section class="classmain">



<header>

        <h2>
            <span class="ancestors"><a href="renderer.html">renderer</a>.</span>CanvasRenderer</h2>

            <div class="class-description">Base Class to render layer on HTMLCanvasElement</div>


</header>

<article>
    <div class="container-overview">



    <!-- <h2>Constructor</h2> -->

    <h4 class="name" id="CanvasRenderer"><span class="type-signature">(abstract, protected) </span>new <a href="#CanvasRenderer">renderer.CanvasRenderer</a><span class="signature">(layer)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L16" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L16" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#CanvasRenderer" class="improvelink">[link]</a> -->
    </h4>










<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>layer</code>

                </td>


            <td class="type">


<span class="param-type"><a href="Layer.html">Layer</a></span>



            </td>



            <td class="description last">the layer to render</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->




    <h5>Extends:</h5>



    <ul>
        <li><a href="Class.html">Class</a></li>
    </ul>





























<hr>

    </div>

    <!--
        <h3 class="subsection-title">Extends</h3>




    <ul>
        <li><a href="Class.html">Class</a></li>
    </ul>


     -->















                    <h3 class="subsection-title">Methods</h3>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="render"><span class="type-signature"></span><a href="#render">render</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L34" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L34" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#render" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Render the layer.
Call checkResources
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="checkResources"><span class="type-signature">(abstract) </span><a href="#checkResources">checkResources</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L75" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L75" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#checkResources" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Check if has any external resources to load
If yes, load the resources before calling draw method
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Array.&lt;Array></span>:


<!-- <div class="param-desc"> -->
    an array of resource arrays [ [url1, width, height], [url2, width, height], [url3, width, height] .. ]
<!-- </div> -->






<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="draw"><span class="type-signature">(abstract) </span><a href="#draw">draw</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L85" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L85" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#draw" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    a required abstract method to implement
draw the layer when map is not interacting
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="drawOnInteracting"><span class="type-signature">(abstract) </span><a href="#drawOnInteracting">drawOnInteracting</a><span class="signature">(eventParam)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L94" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L94" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#drawOnInteracting" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    an optional abstract method to implement
draw the layer when map is interacting (moving/zooming/dragrotating)
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>eventParam</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="needToRedraw"><span class="type-signature"></span><a href="#needToRedraw">needToRedraw</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L128" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L128" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#needToRedraw" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Ask whether the layer renderer needs to redraw
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onSkipDrawOnInteracting"><span class="type-signature"></span><a href="#onSkipDrawOnInteracting">onSkipDrawOnInteracting</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L140" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L140" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onSkipDrawOnInteracting" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    A callback for overriding when drawOnInteracting is skipped due to low fps
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="mustRenderOnInteracting"><span class="type-signature"></span><a href="#mustRenderOnInteracting">mustRenderOnInteracting</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L155" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L155" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#mustRenderOnInteracting" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Whether must call render instead of drawOnInteracting when map is interacting
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="setToRedraw"><span class="type-signature"></span><a href="#setToRedraw">setToRedraw</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L162" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L162" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#setToRedraw" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Set to redraw, ask map to call draw/drawOnInteracting to redraw the layer
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="setCanvasUpdated"><span class="type-signature"></span><a href="#setCanvasUpdated">setCanvasUpdated</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L170" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L170" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#setCanvasUpdated" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Mark layer's canvas updated
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="isCanvasUpdated"><span class="type-signature">(protected) </span><a href="#isCanvasUpdated">isCanvasUpdated</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L180" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L180" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#isCanvasUpdated" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Only called by map's renderer to check whether the layer's canvas is updated
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="remove"><span class="type-signature"></span><a href="#remove">remove</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L187" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L187" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#remove" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Remove the renderer, will be called when layer is removed
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="getMap"><span class="type-signature"></span><a href="#getMap">getMap</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L207" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L207" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getMap" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Get map
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Map.html">Map</a></span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="getCanvasImage"><span class="type-signature"></span><a href="#getCanvasImage">getCanvasImage</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L218" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L218" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getCanvasImage" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Get renderer's Canvas image object
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">HTMLCanvasElement</span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="clear"><span class="type-signature"></span><a href="#clear">clear</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L243" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L243" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#clear" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Clear canvas
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="isBlank"><span class="type-signature"></span><a href="#isBlank">isBlank</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L252" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L252" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#isBlank" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    A method to help improve performance.
If you are sure that layer's canvas is blank, returns true to save unnecessary layer works of maps.
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="show"><span class="type-signature"></span><a href="#show">show</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L262" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L262" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#show" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Show the layer
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="hide"><span class="type-signature"></span><a href="#hide">hide</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L269" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L269" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#hide" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Hide the layer
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="setZIndex"><span class="type-signature"></span><a href="#setZIndex">setZIndex</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L277" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L277" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#setZIndex" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Set z-index of layer
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="hitDetect"><span class="type-signature"></span><a href="#hitDetect">hitDetect</a><span class="signature">(point)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L286" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L286" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#hitDetect" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Detect if there is anything painted on the given point
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>point</code>

                </td>


            <td class="type">


<span class="param-type"><a href="Point.html">Point</a></span>



            </td>



            <td class="description last">containerPoint</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="loadResources"><span class="type-signature"></span><a href="#loadResources">loadResources</a><span class="signature">(resourceUrls, onComplete, context)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L323" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L323" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#loadResources" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    loadResource from resourceUrls
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>resourceUrls</code>

                </td>


            <td class="type">


<span class="param-type">Array.&lt;String></span>



            </td>



            <td class="description last">Array of urls to load</td>
        </tr>



        <tr>

                <td class="name"><code>onComplete</code>

                </td>


            <td class="type">


<span class="param-type">function</span>



            </td>



            <td class="description last">callback after loading complete</td>
        </tr>



        <tr>

                <td class="name"><code>context</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">callback's context</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Array.&lt;Promise></span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="createCanvas"><span class="type-signature"></span><a href="#createCanvas">createCanvas</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L365" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L365" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#createCanvas" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Create renderer's Canvas
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="resizeCanvas"><span class="type-signature"></span><a href="#resizeCanvas">resizeCanvas</a><span class="signature">(canvasSize)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L425" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L425" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#resizeCanvas" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Resize the canvas
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>canvasSize</code>

                </td>


            <td class="type">


<span class="param-type"><a href="Size.html">Size</a></span>



            </td>



            <td class="description last">the size resizing to</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="clearCanvas"><span class="type-signature"></span><a href="#clearCanvas">clearCanvas</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L450" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L450" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#clearCanvas" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Clear the canvas to blank
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="prepareCanvas"><span class="type-signature"></span><a href="#prepareCanvas">prepareCanvas</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L463" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L463" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#prepareCanvas" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Prepare the canvas for rendering. <br>
1. Clear the canvas to blank. <br>
2. Clip the canvas by mask if there is any and return the mask's extent
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="PointExtent.html">PointExtent</a></span>:


<!-- <div class="param-desc"> -->
    mask's extent of current zoom's 2d point.
<!-- </div> -->






<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="getViewExtent"><span class="type-signature"></span><a href="#getViewExtent">getViewExtent</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L563" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L563" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getViewExtent" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Get renderer's current view extent in 2d point
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object</span>:


<!-- <div class="param-desc"> -->
    view.extent, view.maskExtent, view.zoom, view.middleWest
<!-- </div> -->






<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="completeRender"><span class="type-signature"></span><a href="#completeRender">completeRender</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L575" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L575" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#completeRender" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    call when rendering completes, this will fire necessary events and call setCanvasUpdated
</div>




<!--  -->





<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="getEvents"><span class="type-signature"></span><a href="#getEvents">getEvents</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L599" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L599" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getEvents" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Get renderer's event map registered on the map
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object</span>:


<!-- <div class="param-desc"> -->
    events
<!-- </div> -->






<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onZoomStart"><span class="type-signature"></span><a href="#onZoomStart">onZoomStart</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L620" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L620" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onZoomStart" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    /**
onZoomStart
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onZoomEnd"><span class="type-signature"></span><a href="#onZoomEnd">onZoomEnd</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L627" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L627" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onZoomEnd" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onZoomEnd
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onZooming"><span class="type-signature"></span><a href="#onZooming">onZooming</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L635" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L635" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onZooming" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onZooming
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onMoveStart"><span class="type-signature"></span><a href="#onMoveStart">onMoveStart</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L641" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L641" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onMoveStart" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onMoveStart
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onMoving"><span class="type-signature"></span><a href="#onMoving">onMoving</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L647" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L647" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onMoving" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onMoving
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onMoveEnd"><span class="type-signature"></span><a href="#onMoveEnd">onMoveEnd</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L653" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L653" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onMoveEnd" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onMoveEnd
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onResize"><span class="type-signature"></span><a href="#onResize">onResize</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L661" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L661" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onResize" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onResize
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onDragRotateStart"><span class="type-signature"></span><a href="#onDragRotateStart">onDragRotateStart</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L671" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L671" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onDragRotateStart" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onDragRotateStart
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onDragRotating"><span class="type-signature"></span><a href="#onDragRotating">onDragRotating</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L677" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L677" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onDragRotating" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onDragRotating
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onDragRotateEnd"><span class="type-signature"></span><a href="#onDragRotateEnd">onDragRotateEnd</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L683" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L683" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onDragRotateEnd" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onDragRotateEnd
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onSpatialReferenceChange"><span class="type-signature"></span><a href="#onSpatialReferenceChange">onSpatialReferenceChange</a><span class="signature">(param)</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L691" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L691" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onSpatialReferenceChange" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    onSpatialReferenceChange
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>param</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">event parameters</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->






























<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="getDrawTime"><span class="type-signature"></span><a href="#getDrawTime">getDrawTime</a><span class="signature">()</span>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L698" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/renderer/layer/CanvasRenderer.js#L698" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#getDrawTime" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Get ellapsed time of previous drawing
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Number</span>:







<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="callInitHooks"><span class="type-signature"></span><i><span class="type-signature"> (inherited)  </span><a href="#callInitHooks">callInitHooks</a><span class="signature">()</span></i>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L53" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L53" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#callInitHooks" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Visit and call all the init hooks defined on Class and its parents.
</div>




<!--  -->





<!-- event properties -->









    <h5>Inherited From:</h5>
    <ul><li>
        <a href="Class.html#callInitHooks">Class#callInitHooks</a>
    </li></ul>




















<h5>Returns:</h5>
<span class="type-signature"><a href="Class.html">Class</a></span>:


<!-- <div class="param-desc"> -->
    this
<!-- </div> -->






<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="setOptions"><span class="type-signature"></span><i><span class="type-signature"> (inherited)  </span><a href="#setOptions">setOptions</a><span class="signature">(options)</span></i>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L64" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L64" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#setOptions" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Merges options with the default options of the object.
</div>




<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>options</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">options to set</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->









    <h5>Inherited From:</h5>
    <ul><li>
        <a href="Class.html#setOptions">Class#setOptions</a>
    </li></ul>




















<h5>Returns:</h5>
<span class="type-signature"><a href="Class.html">Class</a></span>:


<!-- <div class="param-desc"> -->
    this
<!-- </div> -->






<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="config"><span class="type-signature"></span><i><span class="type-signature"> (inherited)  </span><a href="#config">config</a><span class="signature">(conf)</span></i>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L94" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L94" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#config" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    1. Return object's options if no parameter is provided. <br/>

2. update an option and enable/disable the handler if a handler with the same name existed.
</div>


    <!--<h5>Example:</h5>-->


        <pre class="prettyprint"><code>// Get marker's options;
var options = marker.config();
// Set map's option "draggable" to false and disable map's draggable handler.
map.config('draggable', false);
// You can update more than one options like this:
map.config({
    'scrollWheelZoom' : false,
    'doubleClickZoom' : false
});</code></pre>





<!--  -->






<table class="params">
    <thead>
    <tr>

        <th>Parameter</th>

        <th>Type</th>



        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>


        <tr>

                <td class="name"><code>conf</code>

                </td>


            <td class="type">


<span class="param-type">Object</span>



            </td>



            <td class="description last">config to update</td>
        </tr>


    </tbody>
</table>



<!-- event properties -->









    <h5>Inherited From:</h5>
    <ul><li>
        <a href="Class.html#config">Class#config</a>
    </li></ul>




















<h5>Returns:</h5>
<span class="type-signature"><a href="Class.html">Class</a></span>:


<!-- <div class="param-desc"> -->
    this
<!-- </div> -->






<hr>



    <!-- <h2>Constructor</h2> -->

    <li>

    <h4 class="name" id="onConfig"><span class="type-signature"></span><i><span class="type-signature"> (inherited)  </span><a href="#onConfig">onConfig</a><span class="signature">()</span></i>


            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L129" class="improvelink">[source]</a>


    <!--
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/core/Class.js#L129" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#onConfig" class="improvelink">[link]</a> -->
    </h4>


    </li>






<div class="description">
    Default callback when config is called
</div>




<!--  -->





<!-- event properties -->









    <h5>Inherited From:</h5>
    <ul><li>
        <a href="Class.html#onConfig">Class#onConfig</a>
    </li></ul>






















<hr>






</article>

</section>




</div>

<nav class="page-nav">
    <h2><a href="index.html">V0.49.1</a></h2><h4>Classes</h4><ul></ul><h5>Map</h5><ul><li><a href="Map.html">Map</a></li></ul><h5>Layer</h5><ul><li><a href="Layer.html">Layer</a></li><li><a href="TileSystem.html">TileSystem</a></li><li><a href="TileLayer.html">TileLayer</a></li><li><a href="GroupTileLayer.html">GroupTileLayer</a></li><li><a href="WMSTileLayer.html">WMSTileLayer</a></li><li><a href="OverlayLayer.html">OverlayLayer</a></li><li><a href="VectorLayer.html">VectorLayer</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="ParticleLayer.html">ParticleLayer</a></li><li><a href="ImageLayer.html">ImageLayer</a></li></ul><h5>Geometry</h5><ul><li><a href="Geometry.html">Geometry</a></li><li><a href="Path.html">Path</a></li><li><a href="Marker.html">Marker</a></li><li><a href="TextMarker.html">TextMarker</a></li><li><a href="Label.html">Label</a></li><li><a href="TextBox.html">TextBox</a></li><li><a href="Polygon.html">Polygon</a></li><li><a href="LineString.html">LineString</a></li><li><a href="Curve.html">Curve</a></li><li><a href="ArcCurve.html">ArcCurve</a></li><li><a href="QuadBezierCurve.html">QuadBezierCurve</a></li><li><a href="CubicBezierCurve.html">CubicBezierCurve</a></li><li><a href="ConnectorLine.html">ConnectorLine</a></li><li><a href="ArcConnectorLine.html">ArcConnectorLine</a></li><li><a href="Ellipse.html">Ellipse</a></li><li><a href="Circle.html">Circle</a></li><li><a href="Sector.html">Sector</a></li><li><a href="Rectangle.html">Rectangle</a></li><li><a href="GeometryCollection.html">GeometryCollection</a></li><li><a href="MultiGeometry.html">MultiGeometry</a></li><li><a href="MultiPoint.html">MultiPoint</a></li><li><a href="MultiLineString.html">MultiLineString</a></li><li><a href="MultiPolygon.html">MultiPolygon</a></li><li><a href="GeoJSON.html">GeoJSON</a></li><li><a href="GeometryEditor.html">GeometryEditor</a></li></ul><h5>Basic types</h5><ul><li><a href="Coordinate.html">Coordinate</a></li><li><a href="Extent.html">Extent</a></li><li><a href="Point.html">Point</a></li><li><a href="PointExtent.html">PointExtent</a></li><li><a href="Position.html">Position</a></li><li><a href="Size.html">Size</a></li></ul><h5>Maptool</h5><ul><li><a href="MapTool.html">MapTool</a></li><li><a href="DrawTool.html">DrawTool</a></li><li><a href="DistanceTool.html">DistanceTool</a></li><li><a href="AreaTool.html">AreaTool</a></li></ul><h5>Ui</h5><ul><li><a href="ui.UIComponent.html">ui.UIComponent</a></li><li><a href="ui.UIMarker.html">ui.UIMarker</a></li><li><a href="ui.InfoWindow.html">ui.InfoWindow</a></li><li><a href="ui.ToolTip.html">ui.ToolTip</a></li><li><a href="ui.Menu.html">ui.Menu</a></li></ul><h5>Control</h5><ul><li><a href="control.Control.html">control.Control</a></li><li><a href="control.Zoom.html">control.Zoom</a></li><li><a href="control.LayerSwitcher.html">control.LayerSwitcher</a></li><li><a href="control.Attribution.html">control.Attribution</a></li><li><a href="control.Scale.html">control.Scale</a></li><li><a href="control.Panel.html">control.Panel</a></li><li><a href="control.Toolbar.html">control.Toolbar</a></li><li><a href="control.Overview.html">control.Overview</a></li></ul><h5>Core</h5><ul><li><a href="Ajax.html">Ajax</a></li><li><a href="Class.html">Class</a></li><li><a href="MapboxUtil.html">MapboxUtil</a></li><li><a href="Util.html">Util</a></li><li><a href="DomUtil.html">DomUtil</a></li><li><a href="StringUtil.html">StringUtil</a></li></ul><h5>Animation</h5><ul><li><a href="animation.Easing.html">animation.Easing</a></li><li><a href="animation.Frame.html">animation.Frame</a></li><li><a href="animation.Player.html">animation.Player</a></li><li><a href="animation.Animation.html">animation.Animation</a></li></ul><h5>Geo</h5><ul><li><a href="CRS.html">CRS</a></li><li><a href="measurer.Identity.html">measurer.Identity</a></li><li><a href="measurer.DEFAULT.html">measurer.DEFAULT</a></li><li><a href="measurer.Measurer.html">measurer.Measurer</a></li><li><a href="measurer.WGS84Sphere.html">measurer.WGS84Sphere</a></li><li><a href="measurer.BaiduSphere.html">measurer.BaiduSphere</a></li><li><a href="projection.DEFAULT.html">projection.DEFAULT</a></li><li><a href="projection.BAIDU.html">projection.BAIDU</a></li><li><a href="projection.EPSG3857.html">projection.EPSG3857</a></li><li><a href="projection.EPSG4326.html">projection.EPSG4326</a></li><li><a href="projection.EPSG4490.html">projection.EPSG4490</a></li><li><a href="projection.IDENTITY.html">projection.IDENTITY</a></li><li><a href="Transformation.html">Transformation</a></li></ul><h5>Handler</h5><ul><li><a href="Handler.html">Handler</a></li><li><a href="DragHandler.html">DragHandler</a></li></ul><h5>Other</h5><ul><li><a href="renderer.CanvasRenderer.html">renderer.CanvasRenderer</a></li></ul><h4>Namespaces</h4><ul><li><a href="measurer.html">measurer</a></li><li><a href="projection.html">projection</a></li><li><a href="renderer.html">renderer</a></li></ul><h4>Mixins</h4><ul><li><a href="Eventable.html">Eventable</a></li><li><a href="JSONAble.html">JSONAble</a></li><li><a href="measurer.Common.html">measurer.Common</a></li><li><a href="projection.Common.html">projection.Common</a></li><li><a href="Handlerable.html">Handlerable</a></li><li><a href="CenterMixin.html">CenterMixin</a></li><li><a href="TextEditable.html">TextEditable</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="ui.Menuable.html">ui.Menuable</a></li></ul><h3>Global</h3><ul><li><a href="global.html#INTERNAL_LAYER_PREFIX">INTERNAL_LAYER_PREFIX</a></li><li><a href="global.html#RESOURCE_PROPERTIES">RESOURCE_PROPERTIES</a></li><li><a href="global.html#RESOURCE_SIZE_PROPERTIES">RESOURCE_SIZE_PROPERTIES</a></li><li><a href="global.html#NUMERICAL_PROPERTIES">NUMERICAL_PROPERTIES</a></li><li><a href="global.html#COLOR_PROPERTIES">COLOR_PROPERTIES</a></li><li><a href="global.html#getListeningEvents">getListeningEvents</a></li><li><a href="global.html#isEmpty">isEmpty</a></li><li><a href="global.html#IS_NODE">IS_NODE</a></li><li><a href="global.html#identity">identity</a></li><li><a href="global.html#copy">copy</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#add">add</a></li><li><a href="global.html#subtract">subtract</a></li><li><a href="global.html#length">length</a></li><li><a href="global.html#normalize">normalize</a></li><li><a href="global.html#dot">dot</a></li><li><a href="global.html#scale">scale</a></li><li><a href="global.html#cross">cross</a></li><li><a href="global.html#distance">distance</a></li><li><a href="global.html#transformMat4">transformMat4</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Mon Sep 07 2020 17:52:21 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>

</body>
</html>
